<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<style>
#div1 div {
	width: 200px;
	height: 200px;
	border: 1px #ccc solid;
	display: none;
}

.active {
	background: red;
}
</style>
<script src="test.js"></script>
<script>
// 改造原则
// 1. 函数不要嵌套
// 2. 除了赋值表达式, 其他的代码块尽量封装为函数.

var oParent = null;
var oBtn = null;
var aDiv = null;

window.onload = function () {
	oParent = document.getElementById('div1');
	aBtn = oParent.getElementsByTagName('input');
	aDiv = oParent.getElementsByTagName('div');

	init();

};

function init() {
	for (var i = 0; i < aBtn.length; i++) {
		// 保存索引
		aBtn[i].index = i;
		// onclick
		aBtn[i].onclick = doTab;
	}
}

function doTab() {
	// 所有的 btn 清空 class, 所有的 aDiv 先隐藏.
	for (var i = 0; i < aBtn.length; i++) {
		aBtn[i].className = '';
		aDiv[i].style.display = 'none';
	}
	this.className = "active";
	// 对应的 div 可见
	aDiv[this.index].style.display = 'block';
}
</script>
</head>
<body>
<div id="div1">
	<input type="button" value="1" class="active">
	<input type="button" value="2">
	<input type="button" value="3">
	<div style="display:block">111</div>
	<div>222</div>
	<div>333</div>
</div>

<a href="">text</a>
<ul>
	<li></li>
</ul>
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<a href="">

</a>
</body>
</html>
